<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" ></script>
  <!-- bootstrap -->
  <script src="public/jQuery.min.js"></script>
  <link rel="stylesheet" href="./css/service_list.css">
  <title>服务列表</title>
</head>

<body>
  <div id="service_list">
    <header></header>
    <div class="blogbigbox">
      <div class="container">
        <div class="row">
          <!-- 左边大盒子 -->
          <div class="col-md-4">
            <div class="serviceleftbox">
              <!-- 列表盒子 -->
              <div class="listbox">
                <ul>
                  <li>
                    <p>妇科</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>心脏病学</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>骨科</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>眼科</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>耳鼻喉</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>肠胃</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>皮肤科医生</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                  <li>
                    <p>心理医生</p><img src="./img/blog/right.png" alt="" class="listimg">
                  </li>
                </ul>
              </div>
              <!-- 列表盒子 -->
              <!-- 预约 -->
              <div class="orderbox">
                <p class="ordertit">预约</p>
                <div class="orderform">
                  <div class="inputone">
                    <input type="text" placeholder="名字">
                  </div>
                  <div class="inputone">
                    <input type="text" placeholder="电子邮件">
                  </div>
                  <div class="inputone">
                    <input type="tel" placeholder="电话">
                  </div>
                  <div class="inputone">
                    <input type="date" placeholder="日期">
                  </div>
                  <div class="inputone">
                    <input type="text" placeholder="服务业">
                  </div>
                  <button class="orderbut">预约</button>
                </div>
              </div>
              <!-- 预约 -->
              <!-- 紧急情况 -->
              <div class="urgentbox">
                <p class="urgenttit">紧急情况</p>
                <p class="urgenttext">事故和紧急情况是没有人放过的事情，也没有偏见。</p>
                <button class="urgentbut">联系我们</button>
              </div>
              <!-- 紧急情况 -->
            </div>
          </div>
          <!-- 左边大盒子 -->
          <!-- 右边大盒子 -->
          <div class="col-md-8">
            <div class="servicerightbox">
              <!-- 第一层图片 -->
              <img src="./img/index/bgone (5).jpg" alt="" class="bgone">
              <!-- 第一层图片 -->
              <!-- 第二层文字 -->
              <p class="twoline">Donec finibus massa sedelit sollicitudinnon congueleo sagittiurabitur egeturna place
                loremdignissim lorem acmaximus leousce vulputate eros risuseget dignissim leo scelerisque
                iaecenasdignissim elementumnisl ut sagittiullam varius enimat nullas.</p>
              <!-- 第二层文字 -->
              <!-- 第三层文字 -->
              <p class="twoline">"ajew!ua sn!leA welln!!aes yn sjuunguawa a w!ss!u p seuabae! anbs!.ajaosoa w!ss! u3!p
                jaasns!! soa ajendjnA aosnoa snw!xewpe wa.o wss!u8p wajoj apejd euunja33</p>
              <!-- 第三层文字 -->
              <!-- 第四层文字 -->
              <div>
                <p style="font-size: 25px;">妇科服务</p>
                <div class="category">
                  <ul>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">腹腔镜输卵管结扎术
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">乳房检查
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">避孕咨询
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">乳房疼痛的管理
                    </li>
                    <li> <img src="./img/blog/right (2).png" alt="" class="cgimg">慢性盆腔疼痛的管理</li>
                  </ul>
                  <ul>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">子宫内膜异位症的管理
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">经过多的管理
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">痛经的管理
                    </li>
                    <li>
                      <img src="./img/blog/right (2).png" alt="" class="cgimg">更年期管理
                    </li>
                    <li> <img src="./img/blog/right (2).png" alt="" class="cgimg">输卵管复通术</li>
                  </ul>
                </div>
              </div>
              <!-- 第四层文字 -->
              <!-- 第五层文字 -->
              <p class="twoline">Duis malesuadavelitvel dapibus tinciduntst magna lobortis annec pulvinar lorem massa et nisl.莫尔比·维维拉夸姆·伏隔膜 (Morbiviverraquam accumsan eleifend pulvinarlibero mauris ultricies leeuauctor liberonunc ut massaoin quis dignissim seusce aliqueteratet ultricies volutpaunc tortor iaculisrisus)。</p>
              <!-- 第五层文字 -->
              <!-- 第六层文字 -->
              <p class="twoline">Placerat lorem dignissim lorem acmaximus leousce vulputate eros risuseget dignissim leoscelerisque iaecenas dignissim elementumnislut sagittiullam varius enimate.莫尔比·维维拉夸姆伏隔膜(Morbiviverraquam accumsan eleifend pulvinar libero mauris ultricies leeu auctor liberonuncut massaoin quis dignissim seusce aliqueteratet ultricies volutpaunc tortor iaculis risus) Duismalesuadavelitvel dapibus tinciduntst magna lobortis annec pulvinar lorem massa et nisl.</p>
              <!-- 第六层文字 -->
            </div>
          </div>
          <!-- 右边大盒子 -->
        </div>
      </div>
    </div>
    <footer></footer>
  </div>



  <script>
    // 头部尾部
    $(function () {
      $("header").load("./header.html")
      $("footer").load("./footer.html")
    });
        // 头部尾部
  </script>
</body>

</html>